<template>

	<u-popup :show="Contact" @close="Close" mode="bottom" closeable round="10" :safeAreaInsetTop="false"
		:safeAreaInsetBottom="InsetBottom">
		<view class="popUp">
			<text class="black bold size32 m-top30">{{Pinia.articleInfo.articleSource}}</text>
			<view class="content">
				<view class="headImg flexac">
					<image :src="Utils.imgUrls(Pinia.articleInfo.website_article_img)" mode="aspectFill" class="Imgs">
					</image>
				</view>
				<text class="color size32">{{Pinia.articleInfo.website_article_title}}</text>
				<view class="d-flex a-center m-top6" @click.stop="Utils.setClip(Pinia.articleInfo.website_article_url)">
					<text class="color_99 size28" selectable
						user-select>微信：{{Pinia.articleInfo.website_article_url}}</text>
					<view class="iconfont icon-fuzhi size38 color_99 p-left10"></view>
				</view>
				<image :src="Utils.imgUrls(Pinia.articleInfo.website_article_atlas_arr[0])" show-menu-by-longpress
					mode="aspectFit" class="DownCode"></image>
				<text class="color_33 size30 bold">长按识别二维码添加红娘微信</text>
				<!-- #ifdef MP-WEIXIN -->
				<view class="d-flex a-center m-top10"
					@click="Utils.saveImage(Utils.imgUrls(Pinia.articleInfo.website_article_atlas_arr[0]))">
					<text class="color_99 size28">或保存图片到相册</text>
					<view class="iconfont icon-xiazaidaoru color_99 size32 p-left10"></view>
				</view>
				<!-- #endif -->
			</view>
		</view>
	</u-popup>

</template>

<script setup>
	import { ref } from 'vue';
	import { usePiniaStore } from '@/store/pinia.js';
	import Utils from '@/common/utils.js';

	const Pinia = usePiniaStore();
	const emit = defineEmits(['closePop']);
	const InsetBottom = ref(false);
	const Contact = ref(false);
	const Close = () => Contact.value = false;


	defineExpose({
		Contact
	})
</script>

<style lang="scss" scoped>
	.popUp {
		width: 100%;
		background-image: linear-gradient(to top, #ffffff 0%, #fbe7ea 100%);
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content {
		width: 660rpx;
		margin: 80rpx auto 10rpx auto;
		padding-top: 80rpx;
		padding-bottom: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.08);
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.headImg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		position: absolute;
		top: -50rpx;
		left: 50%;
		background-color: $themeColor;
		transform: translate(-50%, 0);
	}

	.Imgs {
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
	}

	.DownCode {
		width: 420rpx;
		height: 440rpx;
	}
</style>